<template>
    <header class="head">
        <h2>社区防疫管理系统</h2>
        <div class="infos" v-if="userinfo">

            <p> {{userinfo.username}}</p>
            <Avatar :userinfo="userinfo"/>
            <p>
                <el-tag effect="plain" style="background:transparent" type="success">  {{userinfo.roleid | rolename}}</el-tag>
            </p>
            <p>
                <el-button size="mini"  @click="logout" type="danger" icon="el-icon-switch-button" circle></el-button>
            </p>
        </div>
    </header>
</template>

<script>
import Avatar from "./uploadavatar.vue"
import {mapState} from  "vuex"
export default {
    data(){
        return {
            // count1:this.$store.state.count  // 初始化  监听 
        }
    },
    computed:{
        ...mapState(['count'])
    },
    components:{
        Avatar
    },
    props:['userinfo'],
    methods:{
        logout(){
            this.$confirm('你确定要退出登录吗, 是否继续?', '退出提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem("roleid");
                    sessionStorage.removeItem("token");  // token 判断是否登录的标志
                    this.$router.push({name:"login"})
                }).catch(() => {

                });
        }
    }
}
</script>

<style lang="scss" scoped>
.head{
    width:100%;
    height:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    h2{
        color:#C0C4CC !important;
        font-size:24px;
    }
    .infos{
        display: flex;
         align-items: center;
        p{
            margin:0 6px; 
            cursor: pointer;
            color:#C0C4CC !important;
        }
    }
}


</style>